<template>
  <div class="navall">
    <div class="navhead">
      <div class="nav_title">
        <b style="font-weight:bold">&nbsp;<span style="color:rgb(0, 160, 233);">Financing & Loan</span><span style="color:#cccccc">&nbsp;Design</span></b>
      </div>
      <div class="nav_list">

        <ul>
          <li><router-link to="/page" :class="{navchose: nvaLick == '/page'}">首页</router-link></li>
          <li><router-link to="/about" :class="{navchose: nvaLick == '/about'}">关于我们</router-link></li>
          <li><router-link to="/loan" :class="{navchose: nvaLick == '/loan'}">贷款专营</router-link></li>
          <li><router-link to="/new" :class="{navchose: nvaLick == '/new'}">新闻咨讯</router-link></li>
          <li><router-link to="/contact" :class="{navchose: nvaLick == '/contact'}">联系我们</router-link></li>
        </ul>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'navhead',
    data () {
      return {

      }
    },
    computed: {
      nvaLick: function () {
        let vv = this.$route.path
        return vv
      }
    },
    methods: {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .navall{
    position: relative;
    width:1440px;
    height:120px;
    .navhead {
      font-size: 32px;
      width:1440px;
      height:120px;
      position: absolute;
      top:5px;
      left:0px;
      /*font-weight:bold;*/
      /*line-height:120px;*/
      .nav_title {
        float:left;
        line-height:110px;
        margin-left: 100px;
        margin-right: 200px;
        /*top: 50px;*/
        /*left: 10px;*/
        /*z-index: 32;*/
        text-align: left;
        /*white-space: nowrap;*/
      }
      ul li {
        float: left;
        margin-left:10px;
        font-size: 16px;
        width: 100px;
        height:40px;
        color: rgb(43, 43, 43);
        border: 1px solid #fff;
        text-align: center;
        line-height:40px;
        .navchose{
          color: #ffffff;
          height:40px;
          border-radius: 5px;
          background: #00a0e9;
        }
        a{
          text-decoration: none;
          display: block;
          color: rgb(43, 43, 43);
          &:hover{
            color: #ffffff;
            height:40px;
            border-radius: 5px;
            background: #00a0e9;
          }
        }

      }

    }
  }
</style>
